<template>
  <div class="channel">
    <Item :isActive="isActive" @active="$emit('active')">
        <div class="inner">
            <span class="name">{{data.name}}</span>
            <span class="number">{{data.channel_count}}</span>
        </div>
    </Item>
  </div>
</template>

<script>
import Item from './Item.vue'
export default {
    props: {
        isActive: {
            type: Boolean,
            default: false,
        },
        data: {
            type: Object,
            default: function(){
                return {}
            }
        }
    },
    components: {
        Item,
    },

}
</script>

<style scoped>
    .channel{
        width: 100%;
        height: 40px;
        line-height: 40px;
    }
    .inner{
        padding: 0 20px;
        /* display: flex;
        justify-content: space-between; */
    }
    .name{
        font-size: 14px;
        color: #212121;
    }
    .number{
        color: #999;
        font-size: 12px;
        margin-left: 8px;
    }
    .name,
    .number{
        float: left;
    }
</style>